<script setup>
import { ref, onMounted } from 'vue'
import { myListAPI } from '@/api/login'

const tabList = ref([
  { typeName: '全部' },
  { typeName: '待审批' },
  { typeName: '已审批' },
])

const itemList = ref([
  { label: '场地地点', key: '-' },
  { label: '预约时间', key: 'createTime' },
  { label: '申请人', key: 'reqUserName' },
  { label: '手机号', key: 'reqUserPhone' },
  { label: '申请时间', key: 'createTime' },
  { label: '审批编号', key: '-' },
])

const listData = ref([])
const getList = async () => {
  try {
    const res = await myListAPI()
    listData.value = res.data
  } catch (error) {
    const { code, msg } = error
    if (code != '401') {
      uni.showToast({ title: msg, icon: 'none' })
    }
  }
}

const toApprovalResult = (item) => {
  uni.navigateTo({
    url: `/pages/approval-result/approval-result?item=${encodeURIComponent(
      JSON.stringify(item)
    )}`,
  })
}

onMounted(() => {
  getList()
})
</script>

<template>
  <view class="my-approval">
    <view class="fixed-tab">
      <fes-tabs type="line" :data="tabList" />
    </view>
    <view class="list">
      <detail-card
        v-for="(item, index) in listData"
        :key="index"
        :title="item.reqName"
        :status="item.status + ''"
        :obj="item"
        :itemList="itemList"
        @tap="toApprovalResult(item)"
      ></detail-card>
      <no-data v-if="listData.length == 0" />
    </view>
  </view>
</template>

<style lang="scss" scoped>
.my-approval {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 40rpx;

  .fixed-tab {
    position: sticky;
    top: 0;
  }

  .list {
    padding: 30rpx 24rpx 0;
  }

  .approval {
    padding: 0 24rpx;
  }
}

.limit2 {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.limit3 {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
</style>
